import { MaterialIcons } from "@expo/vector-icons";
import React, { useState } from "react";
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import ColorPicker from "react-native-wheel-color-picker";

interface DrawingToolProps {
  onBrushSelect: (brush: BrushSettings) => void;
  onEraserToggle: (enabled: boolean) => void;
  onClearAll: () => void;
  currentTab?: "brush" | "color" | "settings";
}

export interface BrushSettings {
  type: 'pen' | 'marker' | 'brush' | 'pencil';
  size: number;
  opacity: number;
  color: string;
}

// 画笔类型数据
const brushTypes = [
  { key: "pen", label: "钢笔", icon: "edit" },
  { key: "marker", label: "马克笔", icon: "brush" },
  { key: "brush", label: "毛笔", icon: "format-paint" },
  { key: "pencil", label: "铅笔", icon: "create" },
];

// 颜色数据
const colors = [
  "#FF0000", "#FF4500", "#FF8C00", "#FFD700", "#FFFF00", "#ADFF2F",
  "#00FF00", "#00FA9A", "#00CED1", "#00BFFF", "#0000FF", "#8A2BE2",
  "#FF00FF", "#FF1493", "#FF69B4", "#FFB6C1", "#000000", "#696969",
  "#808080", "#A9A9A9", "#C0C0C0", "#D3D3D3", "#FFFFFF", "#F5F5F5",
];

// 设置数据
const settings = [
  { key: "size", label: "大小", icon: "straighten" },
  { key: "opacity", label: "透明度", icon: "opacity" },
  { key: "eraser", label: "橡皮擦", icon: "auto-fix-high" },
  { key: "clear", label: "清空", icon: "clear" },
];

// 分类标签数据
const CATEGORIES = [
  { id: "brush", name: "画笔" },
  { id: "color", name: "颜色" },
  { id: "settings", name: "设置" },
];

export const DrawingTool: React.FC<DrawingToolProps> = ({
  onBrushSelect,
  onEraserToggle,
  onClearAll,
  currentTab = "brush",
}) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [selectedColor, setSelectedColor] = useState("#000000");

  // 渲染画笔网格
  const renderBrushGrid = () => (
    <View style={styles.itemGrid}>
      {brushTypes.map((brush) => (
        <TouchableOpacity
          key={brush.key}
          style={styles.itemContainer}
          onPress={() => onBrushSelect({
            type: brush.key as 'pen' | 'marker' | 'brush' | 'pencil',
            size: 5,
            opacity: 100,
            color: '#000000',
          })}
        >
          <View style={styles.brushPreview}>
            <MaterialIcons name={brush.icon as any} size={24} color="#666" />
          </View>
          <Text style={styles.itemLabel}>{brush.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 渲染颜色网格
  const renderColorGrid = () => (
    <View style={styles.itemGrid}>
      {colors.map((color, index) => (
        <TouchableOpacity
          key={index}
          style={styles.itemContainer}
          onPress={() => onBrushSelect({
            type: 'pen',
            size: 5,
            opacity: 100,
            color: color,
          })}
        >
          <View style={[styles.colorPreview, { backgroundColor: color }]}>
            {color === "#FFFFFF" && <View style={styles.whiteBorder} />}
          </View>
        </TouchableOpacity>
      ))}
      {/* 颜色画盘按钮 */}
      <TouchableOpacity
        style={styles.itemContainer}
        onPress={() => setShowColorPicker(true)}
      >
        <View style={styles.colorPickerButton}>
          <MaterialIcons name="palette" size={24} color="#666" />
        </View>
      </TouchableOpacity>
    </View>
  );

  // 渲染设置网格
  const renderSettingsGrid = () => (
    <View style={styles.itemGrid}>
      {settings.map((setting) => (
        <TouchableOpacity
          key={setting.key}
          style={styles.itemContainer}
          onPress={() => {
            if (setting.key === 'eraser') {
              onEraserToggle(true);
            } else if (setting.key === 'clear') {
              onClearAll();
            }
          }}
        >
          <View style={styles.settingPreview}>
            <MaterialIcons name={setting.icon as any} size={24} color="#666" />
          </View>
          <Text style={styles.itemLabel}>{setting.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 获取当前分类的内容
  const getCurrentContent = () => {
    switch (currentTab) {
      case "brush":
        return renderBrushGrid();
      case "color":
        return renderColorGrid();
      case "settings":
        return renderSettingsGrid();
      default:
        return renderBrushGrid();
    }
  };

  return (
    <View style={styles.container}>
      {/* 内容列表 */}
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.contentList}
        contentContainerStyle={styles.contentListContainer}
      >
        {getCurrentContent()}
      </ScrollView>

      {/* 颜色画盘模态框 */}
      {showColorPicker && (
        <View style={styles.colorPickerModal}>
          <View style={styles.colorPickerHeader}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <TouchableOpacity onPress={() => setShowColorPicker(false)}>
              <MaterialIcons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              color={selectedColor}
              onColorChange={(color) => {
                setSelectedColor(color);
                onBrushSelect({
                  type: 'pen',
                  size: 5,
                  opacity: 100,
                  color: color,
                });
              }}
              thumbSize={30}
              sliderSize={30}
              noSnap={true}
              row={false}
            />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },

  contentList: {
    backgroundColor: "#fff",
    maxHeight: 300,
  },
  contentListContainer: {
    paddingHorizontal: 10,
    paddingTop: 12,
  },
  itemGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  itemContainer: {
    alignItems: "center",
    width: "20%",
    marginBottom: 16,
  },
  brushPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  colorPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  settingPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  whiteBorder: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 7,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  colorPickerButton: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
  },
  itemLabel: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
  },
  colorPickerModal: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  colorPickerHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: "#fff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  colorPickerTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "#333",
  },
  colorPickerContainer: {
    backgroundColor: "#fff",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    padding: 20,
    height: 300,
  },
});
